<template>
    <div id="wrapper" style="height:100%;">
        <!-- top -->
        <div class="sellnage-nav tab fixed-top mt-97 border20-bottom">
            <ul class="tab-nav">
                <li class="fl border-bottom f30" :class="{'active':params.status == 1}" @click="selectStatus(1)">
                    <a class="nav-01">交易中</a>
                </li>
                <li class="fl border-bottom f30" :class="{'active':params.status == 2}" @click="selectStatus(2)">
                    <a class="nav-02">交易完成</a>
                </li>
                <li class="fl border-bottom f30" :class="{'active':params.status == 3}" @click="selectStatus(3)">
                    <a class="nav-03">交易取消</a>
                </li>
                <li class="fl border-bottom f30" :class="{'active':params.status == 0}" @click="selectStatus(0)">
                    <a class="nav-04">全部</a>
                </li>
            </ul>
        </div>
        <div class="sellmanage-main mt-205">


            <!--审核中-->
            <div class="seller-01 " ref="tab">
                <div class="sellnage-connt mb-20" v-for="v in orderMobileList">

                    <div class="manage-caption px-30  bg-fff">
                        <div class="manage-titl py-30 f28">
                            <span class=" fl mr-30 fontbold">{{v.title}}</span>
                            <!-- <i class="manage-titl-ico" v-if="v.goodsType == 2"></i> -->
                        </div>
                        <a @click="goDetail(v)" v-if="v.goodsType !== 1">
                            <div class="manage-contn bg-faf">
                                <div class="mancon-img fl">
                                    <i class="f22 color-fff bg-000">
                                        {{v.goodsType | getGoodsTypeText}}
                                    </i>
                                    <span class="middle"></span>
                                    <img src="../../../../assets/images/default_img.jpg" v-if="!v.goodsImg">
                                    <img :src="v.goodsImg" v-if="v.goodsImg">
                                </div>
                                <div class="mancon-tn py-15">
                                    <div class="tn-hxtxt f26 color-666">
                                        {{v.gameName}}/{{v.regionName}}/{{v.serverName}}
                                    </div>
                                    <div class="tn-hxtxt f26 color-666 " v-if="v.gameType == 2 && v.goodsType == 3">
                                        商品价格：{{v.totalAmount}}元/件
                                    </div>
                                    <div class="tn-hxtxt f26 color-666 " v-else>商品价格：{{v.totalAmount}}元</div>
                                    <!--<div class="tn-hxtxt f26 color-666" v-if="params.status != 2">下单时间：{{v.createTime | format}}</div>-->
                                    <div class="tn-hxtxt f26 color-666">下单时间：{{v.createTime | format}}</div>
                                </div>
                            </div>
                        </a>
                        <a v-if="v.goodsType === 1" @click="goToEquip(v)">
                            <div class="manage-contn bg-faf">
                                <div class="mancon-img fl">
                                    <i class="f22 color-fff bg-000">
                                        {{v.goodsType | getGoodsTypeText}}
                                    </i>
                                    <span class="middle"></span>
                                    <img src="../../../../assets/images/default_img.jpg" v-if="!v.goodsImg">
                                    <img :src="v.goodsImg" v-if="v.goodsImg">
                                </div>
                                <div class="mancon-tn py-15">
                                    <div class="tn-hxtxt f26 color-666">
                                        {{v.gameName}}/{{v.regionName}}/{{v.serverName}}
                                    </div>
                                    <div class="tn-hxtxt f26 color-666 ">商品价格：{{v.totalAmount}}元</div>
                                    <div class="tn-hxtxt f26 color-666">下单时间：{{v.createTime | format}}</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="mancon-titl px-30 py-30 bg-fff border-bottom ">
            <span class="title-curent f30 pl-30 color-000 buyct-why">{{v.status | getStatusText}}　<em
               v-if="v.status==3 && v.sendTime && v.goodsType==2 && v.gameType==1"
               class="f26">预计到账时间：{{(v.sendTime + 86700000) | format}}</em>　<i v-if="v.status!=4 &&v.complainResult">退款原因:{{v.complainResult | complainResultFilter}}</i></span>
                    </div>
                    <div class="mancon-btn pr-20 py-20 bg-fff border-bottom ">
            <span
               v-if="v.gameType ===2 &&v.goodsType == 3"
               class="kucun pl-30 color-000 f30 fl" style="line-height: .7rem">件数：<span
               class="color-m1 fontarial">{{v.num}}</span></span>
                        <a class="f30 color-m1 border border-color cancel fr"
                           v-if="v.goodsType === 2" @click="
                contactCustom(v.orderId,v.id)">联系客服</a>
                        <a class="f30 color-m1 border border-color cancel fr"
                           v-if="v.goodsType == 3 && v.gameType == 2" @click="goToServe(v)">联系客服</a>
                         <i class="titcur fr" @click="whyClick(v)"
                           v-if="v.goodsType == 3 && v.gameType == 2"></i>
                    </div>
                </div>
                <div class="sellnage-connt mb-20" v-for="v in orderMobilePcList">

                    <div class="manage-caption px-30  bg-fff">
                        <div class="manage-titl py-30 f28">
                            <span class=" fl mr-30 fontbold">{{v.BizOfferName}}</span>
                            <!-- <i class="manage-titl-ico" v-if="v.goodsType == 2"></i> -->
            </div>
                        <a @click="goDetailPc(v)">
                            <div class="manage-contn bg-faf">
                                <div class="mancon-img fl">
                                    <i class="f22 color-fff bg-000">
                                        <!--{{v.goodsType | getGoodsTypeText}}-->
                                        {{v.BizOfferTypeName}}
                                    </i>
                                    <span class="middle"></span>
                                    <img src="../../../../assets/images/default_img.jpg" v-if="!v.goodsImg">
                                    <img :src="v.goodsImg" v-if="v.goodsImg">
        </div>
                                <div class="mancon-tn py-15">
                                    <div class="tn-hxtxt f26 color-666">
                                        {{v.GameName}}/{{v.GameAreaName}}/{{v.GameServerName}}
                                    </div>
                                    <div class="tn-hxtxt f26 color-666 " v-if="v.gameType == 2 && v.goodsType == 3">
                                        商品价格：{{v.totalAmount}}元/件
                                    </div>
                                    <div class="tn-hxtxt f26 color-666 " v-else>商品价格：{{v.TotalPrice}}元</div>
                                    <!--<div class="tn-hxtxt f26 color-666" v-if="params.status != 2">下单时间：{{v.createTime | format}}</div>-->
                                    <div class="tn-hxtxt f26 color-666">下单时间：{{v.CreateDate | format}}</div>
                                </div>
                            </div>
                        </a>
                        <!--<a v-if="v.goodsType === 1" @click="goToEquip(v)">-->
                            <!--<div class="manage-contn bg-faf">-->
                                <!--<div class="mancon-img fl">-->
                                    <!--<i class="f22 color-fff bg-000">-->
                                        <!--&lt;!&ndash;{{v.goodsType | getGoodsTypeText}}&ndash;&gt;-->
                                        <!--{{v.BizOfferTypeName}}-->
                                    <!--</i>-->
                                    <!--<span class="middle"></span>-->
                                    <!--<img src="../../../../assets/images/default_img.jpg" v-if="!v.goodsImg">-->
                                    <!--<img :src="v.goodsImg" v-if="v.goodsImg">-->
                                <!--</div>-->
                                <!--<div class="mancon-tn py-15">-->
                                    <!--<div class="tn-hxtxt f26 color-666">-->
                                        <!--{{v.gameName}}/{{v.regionName}}/{{v.serverName}}-->
                                    <!--</div>-->
                                    <!--<div class="tn-hxtxt f26 color-666 ">商品价格：{{v.totalAmount}}元</div>-->
                                    <!--<div class="tn-hxtxt f26 color-666">下单时间：{{v.createTime | format}}</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</a>-->
                    </div>
                    <div class="mancon-titl px-30 py-30 bg-fff border-bottom ">
            <span class="title-curent f30 pl-30 color-000 buyct-why">
                {{v.OrderFlowStatus | getOrderFlowStatus}}
                <em
                  v-if="v.IsDelayEarn"
                  class="f26">预计到账时间：{{v.LimitByDelayEarn | format}}
                </em>　
                <!--<em-->
              <!--v-if="v.OrderStatus.Value==1 "-->
              <!--class="f26">撤单原因：{{v.CancelRemark | CancelRemarkFilter}}-->
                <!--</em>　-->
                <em
                  v-if="v.OrderStatus.Value==2 "
                  class="f26">取消原因：{{v.CancelRemark}}
                </em>　
                <!--<i v-if="v.status!=4 &&v.complainResult">退款原因:{{v.complainResult | complainResultFilter}}</i>-->
            </span>
                    </div>
                    <div class="mancon-btn pr-20 py-20 bg-fff border-bottom ">
            <!--<span-->
              <!--v-if="(v.BizOfferTypeName!='游戏币')&&v.Quantity"-->
              <!--class="kucun pl-30 color-000 f30 fl" style="line-height: .7rem">件数：-->
                <!--<span-->
              <!--class="color-m1 fontarial">{{v.Quantity}}</span>-->
            <!--</span>-->
                        <a class="f30 color-m1 border border-color cancel fr"
                           v-if="v.KefuQQ" @click="
                contactCustom(v.OrderId,v.id)">联系客服</a>
                        <!--<a class="f30 color-m1 border border-color cancel fr"-->
                           <!--v-if="v.goodsType == 3 && v.gameType == 2" @click="goToServe(v)">联系客服</a>-->
                        <!--<i class="titcur fr" @click="whyClick(v)"-->
                           <!--v-if="v.goodsType == 3 && v.gameType == 2"></i>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="loading" v-show="loading">加载中...</div>
        <div class="list-empty bg-fff" v-show="orderMobileList.length===0 &&orderMobilePcList.length===0 && !loading">
            <p><img src="~images/gamelogo.png"></p>
            <span>您还没有订单</span>
        </div>
    </div>
</template>
<script>
  import {mapState, mapGetters, mapActions} from 'vuex';
  import api from '../../../../api';
  import {complainResultFilter, cancelReasonFilter,getOrderFlowStatus,formatTimeFilter} from 'components/common/filters';

  export default {
    data() {
      return {
        url: location.protocol + '//' + location.hostname + '/api/mobile-order-service/rs/orderdata/getOrderIm',
        urlDb: 'http://gameid.5173.com/BankInfo.axd?methodName=GetOrderIMInfo',
        params: {
          status: this.$route.query.status,
          pageIndex: 1,
          pageSize: 10,
          OrderStatus:this.$route.query.status==1?[0]:(this.$route.query.status==2?[1]:(this.$route.query.status==3?[2]:undefined)),
          ClientType:2,
          TradingServiceType:5,
          FlowStatus:0
        },
        scrollTop: 0,
        isAysnc: true,
        loading: false,
        newList:[],
      }
    },
    beforeRouteEnter(to, from, next) {
      let vm = this;
      if (from.name === 'OrderMobileDetail' || from.name === 'OrderMobileCoinDetail' || from.name === 'OederPcDetail') {
        next(vm => {
          vm.params.status = vm.mobileState.status;
          if (vm.orderMobileList.length > 0||vm.orderMobilePcList.length > 0) {
            vm.params.status = vm.mobileState.status;
          } else {
            vm.params.status = vm.$route.query.status;
            vm.initParams();
            vm.getList();
          }
        });
      } else {
        next(vm => {
          vm.initParams();
          vm.getList();
        });
      }
    },
    computed: {
      ...mapState({
        orderMobileList: state => {
          return state.orderMange.orderMobileList;
        },
        orderMobilePcList: state => {
          return state.orderMange.orderMobilePcList;
        },
        mobileAllLoaded: state => {
          return state.orderMange.mobileAllLoaded;
        },
        mobileAllLoadedPc: state => {
          return state.orderMange.mobileAllLoadedPc;
        },
        mobileState: state => {
          return state.orderMange.mobileState;
        }
      })
    },
    watch: {
      scrollTop(val, oldVal) {
        var vm = this;
        if (vm.$isBottom(200) && (!vm.mobileAllLoaded || !vm.mobileAllLoadedPc)) {
          ++vm.params.pageIndex;
          vm.getList();
          //vm.getOrderMobileList(vm.params);
        }
      }
    },
    created: function () {
      let vm = this;
      vm.$bus.emit('headerText', '手机端订单');
      vm.$nextTick(() => {
        document.body.scrollTop = vm.mobileState.scrollTop;
        document.documentElement.scrollTop = vm.mobileState.scrollTop;
      })
    },
    mounted: function () {
      let vm = this;
      vm.watchGoTop();
      vm.$bus.emit('isBack', false);
      vm.$bus.emit('callback', () => {
        vm.$router.push({name: 'MemberSeller'});
      });
      vm.$bus.emit('isMore', true);
    },
    methods: {
//      goList(){
//        this.$http.post(
//          this.$CONSTANTS.APIMainGoods+'/mainGoodsOrder/getSellerOrderNewList',this.params).then((res)=>{
//          console.log('------55--------',JSON.parse(res.body.result).BizResult.Orders);
//          var attr = [];
//          attr = JSON.parse(res.body.result).BizResult.Orders;
//          this.newList = JSON.parse(res.body.result).BizResult.Orders;
//        })
//      },
      goKefu(QQ){
        let qq = QQ
        if(/baidu/i.test(navigator.userAgent.toLowerCase())||/MicroMessenger/i.test(navigator.userAgent.toLowerCase())){
          this.$messagebox({
            message: "如点击联系客服无法启动QQ，请加客服QQ号(" + qq + ")"
          })
        }else {
          window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + qq + '&version=1&src_type=web&web_src=oicqzone.com')
        }
      },
      goToServe(item) {
        let qq = item.serviceQQ
        if(/baidu/i.test(navigator.userAgent.toLowerCase())||/MicroMessenger/i.test(navigator.userAgent.toLowerCase())){
          this.$messagebox({
            message: "如点击联系客服无法启动QQ，请加客服QQ号(" + qq + ")"
          })
        }else {
          window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + qq + '&version=1&src_type=web&web_src=oicqzone.com')
        }
      },
      goDetail(v) {
        this.saveSrollTop()
        if (v.gameType === 2 && v.goodsType === 3) {
          this.$router.push({
            name: 'OrderMobileCoinDetail',
            query: {orderId: v.orderId, Id: v.id}
          })
        } else {
          this.$router.push({
            name: 'OrderMobileDetail',
            query: {orderId: v.orderId, Id: v.id}
          })
        }
      },
      goDetailPc(v){
        this.saveSrollTop()
        console.log("-------",v)
        this.$router.push({
          name: 'OederPcDetail',
          query: {orderId: v.OrderId,TypeName:v.BizOfferTypeName}
        })
      },
      whyClick(item) {
        let qq = item.serviceQQ
        if (!qq) {
          this.$messagebox({
            message: `正在分配客服中，请稍后`
          })
        } else {
          this.$messagebox({
            message: `如点击联系客服无法启动QQ，请加客服QQ号(${qq})`
          })
        }
      },
      watchGoTop: function () {
        var vm = this;
        window.addEventListener('scroll', function () {
          vm.scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        });
      },
      goToEquip(v) {
        if (v.status !== 2 && v.status !== 3 && v.status !== 8 && v.status !== 9 && v.status !== 10) {
          return;
        }
        window.location.href = `/member/member-seller-equipment-transaction.html?orderId=${v.orderId}_${v.id}`
      },
      goCustomer(val, url) {
       /* if (Object.keys(val).length) {
          //if (val.IsOpenHX) {
          if (val.DefaultIM==1) {
            location.href = `/member/huanxin1.html?url=${encodeURIComponent(url)}`
          } else {
            if (/baidu/i.test(navigator.userAgent.toLowerCase()) || /MicroMessenger/i.test(navigator.userAgent.toLowerCase())) {
              this.$messagebox({
                message: "如点击联系客服无法启动QQ，请加客服QQ号(" + val.CustomServiceQQ + ")"
              })
            } else {
              window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + val.CustomServiceQQ + '&version=1&src_type=web&web_src=oicqzone.com')
            }
          }
        }*/
          if (Object.keys(val).length) {
              console.log(val)
              if (val.DefaultIM==1 || (val.DefaultIM==2 && val.WYCustomService) || (val.DefaultIM==2 && !val.WYCustomService && val.IsOpenHX)) {
                  location.href=`/member/huanxin1.html?url=${encodeURIComponent(url)}`
              } else {
                  if(/baidu/i.test(navigator.userAgent.toLowerCase())||/MicroMessenger/i.test(navigator.userAgent.toLowerCase())){
                      this.$messagebox({
                          message: "如点击联系客服无法启动QQ，请加客服QQ号("+val.CustomServiceQQ+")"
                      })
                  }else {
                      window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + val.CustomServiceQQ + '&version=1&src_type=web&web_src=oicqzone.com')
                  }
              }
          }
      },
      contactCustom(item, id) {
        let url = ""
        if(item.substring(0,2)=="DB" ){
          url = this.$concatUrl({orderid:item,usertype:0,tradingtype:5,callback:'callback'}, this.urlDb)
        }else{
           url = this.$concatUrl({orderId: item, userType: 0, callback: 'callback'}, this.url)
        }
        api.BuyerCenterApi.getOrderIm(url).then(res => {
          if (res.data) {
            if (res.data.Order) {
                this.goCustomer(res.data.Order, url)
            }else {
                this.$toast({ message: '启动服务失败，请稍后重试' })
            }
          }
        })


      },
      saveSrollTop: function () {
        let vm = this;
        let params = {
          scrollTop: vm.scrollTop,
          status: vm.params.status
        }

        vm.setState(params);
      },
      initParams() {
        this.params.pageIndex = 1;
        this.isbook = false;
        this.isbookPc = false;
        this.clearMobilelist();
        this.clearOrderMobileListPc();
      },
      selectStatus: async function (val) {
        let vm = this;
        vm.$router.replace({ // 伪跳转，改变链接但不会初始化数据
          path: '/vue/memberseller/orderListofMobile',
          query: {
            operator: vm.$route.query.operator,
            status: val
          }
        })
        if(val==1){
          this.$set(this.params, 'OrderStatus', [0]);
        }else if(val==2){

          this.$set(this.params, 'OrderStatus', [1]);
        }else if(val==3){

          this.$set(this.params, 'OrderStatus', [2]);
        }else if(val==0){

          this.$set(this.params, 'OrderStatus', undefined);
        }
        vm.params.status = val;

        //设置为初始值
        vm.initParams();
        vm.getList();
      },
      async getList() {
        this.loading = true;
        if(!this.isbook){
           await this.getOrderMobileList(this.params).then((res) => {
                if(this.orderMobileList.length==0){
                    this.isbook = true
                }
            });

        }
        if(!this.isbookPc){
          await this.getOrderMobilePcList(this.params).then((res) => {
                if(this.orderMobilePcList.length==0){
                    this.isbookPc = true
            }
          });
        }

          this.loading = false;


        //
        // if(this.orderMobileList.length==0){
        //   await this.getOrderMobilePcList(this.params).then((res) => {
        //
        //   });
        // }else{
        //   if(this.orderMobilePcList.length==0){
        //     await  this.getOrderMobileList(this.params).then((res) => {
        //
        //     });
        //   }else {
        //     await  this.getOrderMobileList(this.params).then((res) => {
        //
        //     });
        //     await this.getOrderMobilePcList(this.params).then((res) => {
        //
        //     });
        //   }

        // }


      },
      ...mapActions({
        getOrderMobileList: 'member/MEMBER_SELLER_ORDER_MOBILE_LIST',
        getOrderMobilePcList: 'member/MEMBER_SELLER_ORDER_MOBILE_LIST_TWO',
        clearMobilelist: 'member/MEMBER_SELLER_ORDER_MOBILE_CLEAR_LIST',
        clearOrderMobileListPc: 'member/MEMBER_SELLER_ORDER_MOBILE_CLEAR_LIST_TWO',
        setState: 'member/MEMBER_SELLER_ORDER_MOBILE_STATE'
      })
    },
    filters: {
      getGoodsTypeText(val) {
        return val === 1 ? '游戏装备' : val === 2 ? '游戏帐号' : val === 3 ? '游戏币' : '游戏帐号';
      },
      format: formatTimeFilter,
//      CancelRemarkFilter:function (val) {
//        return val.split("：")[1]
//      },
      CancelRemarkFilterTwo:function (val) {
//        if(val.split("：")){
//          return val.split("：")[1].split("；")[0]
//        }
      },
      getStatusText2: function (val) {
        let text = '';

        switch (val) {
          case "0":
            text = '交易中';
            break;
          case "5":
            text = '交易完成';
            break;
          case "2":
            text = '已取消';
            break;
          case "1":
            text = '撤单申请';
            break;
          case "4":
            text = '已取消';
            break;
        }
        return text;
      },
      getStatusText: function (val) {
        let text = '';

        switch (val) {
          case 1:
            text = '待付款';
            break;
          case 2:
            text = '待发货';
            break;
          case 3:
            text = '已发货';
            break;
          case 4:
            text = '交易完成';
            break;
          case 5:
            text = '已退款';
            break;
          case 6:
            text = '已取消';
            break;
          case 7:
            text = '退款中';
            break;
          case 8:
            text = '已付款';
            break;
          case 9:
            text = '申请退款中';
            break;
          case 10:
            text = '客服介入';
            break;

        }
        return text;
      },
      complainResultFilter,
      cancelReasonFilter,
      getOrderFlowStatus
    }
  }
</script>
<style src="css/common/member-cxy.css" ></style>

<style scoped>
    .fixedFill-mx {
        width: 100%;
        height: .96rem;
    }

    .loading {
        text-align: left;
        text-indent: .6rem;
        line-height: .5rem;
        height: .5rem;
        background: url('~images/loading.gif') left center no-repeat;
        background-size: .5rem;
        margin-top: -.1rem;
        margin-left: 2.5rem;
    }

    /*  .sellnage-nav{
              position: fixed;
      width: 100%;
      z-index: 99;
      }*/
</style>
